<template>
	<view class="spOuterhouse">
		<view class="spOuterhouse_title">
			<view class="title_search">
				<u-search placeholder="搜索名称" v-model="keyword" @search="search_cart"></u-search>
			</view>
			<view class="select_ku" @click="showkuSelect = true">
				<view>
					选择仓库：
					<view style="border-radius: 9.52rpx;display: inline-block;border: 1rpx solid #707070FF;">
						<text style="color: #2276BCFF;margin-left: 13.35rpx;">{{kuSelectType_value}}</text>
						<view style="display: inline-block;margin-left: 66.75rpx;margin-right: 13.35rpx;">
							<u-icon name="arrow-down" color="#707070FF" size="35"></u-icon>
						</view>
					</view>
				</view>
				<u-select
				title="选择仓库" 
				:mask-close-able="false" 
				:default-value="[kuSelectValue_default]" 
				v-model="showkuSelect" 
				:list="selectKulist" 
				@confirm="selectKuType">
				</u-select>
			</view>
			<view class="type_cart" @click="showCartSelect = true">
				<view>
					商品类别：
					<view style="border-radius: 9.52rpx;display: inline-block;border: 1rpx solid #707070FF;">
						<text style="color: #2276BCFF;margin-left: 13.35rpx;">{{selectCartType_value}}</text>
						<view style="display: inline-block;margin-left: 66.75rpx;margin-right: 13.35rpx;">
							<u-icon name="arrow-down" color="#707070FF" size="35"></u-icon>
						</view>
					</view>
				</view>
				<u-select
				title="商品类别" 
				:mask-close-able="false" 
				:default-value="[selectCartValue_default]" 
				v-model="showCartSelect" 
				:list="selectCartlist" 
				@confirm="selectCartType">
				</u-select>
			</view>
		</view>
		<view style="margin-top: 25vh;position: absolute;width: 100%;" v-show="isempty">
			<u-empty text="数据为空" mode="data"></u-empty>
		</view>
		<scroll-view scroll-y class="content_scroll" :lower-threshold="50" @scrolltolower="loaderList" v-if="!isempty">
			<yt-card head=" " v-for="(item,index) in cartList" :key="index">
				<view class="content">
					<view class="content_img_box">
						<image class="content_img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/981a7502-fefb-4ff6-bec6-7513cd717fa7.jpg"></image>
					</view>
					<view class="content_text">
						<view class="content_text_cartName">
							商品名称：<text style="color: #9E2424FF;">{{item.cart_name}}</text>
						</view>
						<view class="content_text_type">
							<view class="type_1">
								灶具进风：<text style="color: #9E2424FF;margin-right: 20rpx;">{{item.cook_utensils_jf}}</text>
								气源类别：<text style="color: #9E2424FF;">{{item.cook_utensils_qtype}}</text>
							</view>
							<view class="type_2">
								灶具出风：<text style="color: #9E2424FF;margin-right: 20rpx;">{{item.cook_utensils_cf}}</text>
								灶眼数量：<text style="color: #9E2424FF;">{{item.cook_utensils_eyes}}</text>
							</view>
						</view>
					</view>
					<view class="content_add_button" @click="selecting(item,index)">
						<navigator url="#" class="content_add_button_title">{{selectIcon[index]}}</navigator>
					</view>
				</view>
			</yt-card>
			<view class="gap_phone">
				<u-divider class="gaps" :margin-top="60" bg-color="#EEEEEEFF" border-color="#5f5f5f00">
					<u-loadmore v-show="isLoader" :status="status"/>
				</u-divider>
			</view>
		</scroll-view>
		<view class="selected">
			<view class="selected_title">
				已选择
				<text style="margin: 0 15rpx;font-weight: bold;color: #f00;">{{selectNumber}}</text>
				件货品
			</view>
			<view class="selected_button" @click="toApply">去申请</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ytCard from '../../comment/yt-card.vue'
	export default {
		data() {
			return {
				keyword:'',
				status: 'loadmore',
				showCartSelect:false,
				cartList:[],
				selectCartlist:[ //主机电器、头部、水槽、配件、赠品
					{
						value: '1',
						label: '主机电器'
					},
					{
						value: '2',
						label: '头部'
					},
					{
						value: '3',
						label: '水槽'
					},
					{
						value: '4',
						label: '配件'
					},
					{
						value: '5',
						label: '赠品'
					}								
				],
				selectCartValue_default:'0',
				selectCartType_value:'主机电器',
				showkuSelect:false,
				selectKulist:[ //富安居、万泰隆、快环、澳华、吴圩、荣宝华、迷你厂、京东、总仓库。
					{
						value: '1',
						label: '富安居'
					},
					{
						value: '2',
						label: '万泰隆'
					},
					{
						value: '3',
						label: '快环'
					},
					{
						value: '4',
						label: '澳华'
					},
					{
						value: '5',
						label: '吴圩'
					},
					{
						value: '6',
						label: '荣宝华'
					},
					{
						value: '7',
						label: '迷你厂'
					},
					{
						value: '8',
						label: '京东'
					},
					{
						value: '9',
						label: '总仓库'
					}			
				],
				kuSelectValue_default:'8',
				kuSelectType_value:'总仓库',
				isSelected:[],
				selectIcon:[],
				selectNumber:0,
				selectCarts:new Array(),
				isLoader:false,//测试用,
				limit:6,//懒加载初始化数量
				isall:true,//是否全量查询
				isempty:true,//库存是否为空
				isLoading:false//是否在加载数据中
			};
		},
		onLoad(option) {
			uni.showLoading({
				title:"加载中。。。"
			})
			if(option.success){
				uni.showToast({
					icon:'success',
					title:'提交成功！'
				})
			}
			var Vue = this;
			uniCloud.callFunction({
				name: 'uni-id-cf_mobile',
				data: {
					action:"lookhouse",
					params:{
						cart_name_lookhouse:"",
						cart_depository_lookhouse:"",
						cart_type_lookhouse:"",
						num:Vue.limit,
						isall:Vue.isall
					}
				}
			}).then(({result}) => {
				if(result.code){
					this.$refs.uToast.show({
						title: '出错了！请重新登录。',
						type: 'error',
						position:"top"
					})
					uni.reLaunch({
						url:'../login/login'
					})
					return;
				}
				let { data } = result.data
				data.map((item)=>{
					if(item.cook_utensils_jf == ""){
						item.cook_utensils_jf = "无"
					}
					if(item.cook_utensils_qtype == ""){
						item.cook_utensils_qtype = "无"
					}
					if(item.cook_utensils_cf == ""){
						item.cook_utensils_cf = "无"
					}
					if(item.cook_utensils_eyes == ""){
						item.cook_utensils_eyes = "无"
					}
				})
				Vue.cartList = data
				if(result.Olength == 0){
					this.isempty = true
				}else{
					this.isempty = false
				}
				if(result.Olength > Vue.limit){
					for(var i = 0;i < Vue.limit;i++){
						Vue.selectCarts.push("")
						Vue.selectIcon.push("待添加")
						Vue.isSelected.push(false)
					}
				}else{
					for(var i = 0;i < result.Olength;i++){
						Vue.selectCarts.push("")
						Vue.selectIcon.push("待添加")
						Vue.isSelected.push(false)
					}
				}
				uni.hideLoading()
				console.log(result)
			}).catch(err => {
				uni.hideLoading()
				console.log(err)
			})
		},
		methods:{
			toApply(){
				var arr = new Array()
				this.selectCarts.map((item)=>{
					if(item != ""){
						arr.push(item)
					}
				})
				if(arr.length == 0){
					this.$refs.uToast.show({
						title: '请选择商品后再申请审批！',
						type: 'error',
						position:"top"
					})
				}else if(this.isall){
					this.$refs.uToast.show({
						title: '请选择仓库后再申请审批！',
						type: 'error',
						position:"top"
					})
				}else{
					var applicant_id = encodeURIComponent(uni.getStorageSync('user_id'))
					var applicant = encodeURIComponent(uni.getStorageSync('lastUsername'))
					var cartsarr = encodeURIComponent(JSON.stringify(arr))
					var outerhouse_name = encodeURIComponent(this.kuSelectType_value)
					//等下获取申请人
					uni.navigateTo({
						url:`../confirmOuterhouse/confirmOuterhouse?applicant_id=${applicant_id}&applicant=${applicant}&selectCarts=${cartsarr}&outerhouse_name=${outerhouse_name}`
					})
				}
				console.log(arr)
			},
			loaderList(e){
				this.isLoader = true
				if(!this.isLoading){
					this.isLoading = true
					this.status = 'loading';
					this.limit += 3;
					var Vue = this;
					uniCloud.callFunction({
						name: 'uni-id-cf_mobile',
						data: {
							action:"lookhouse",
							params:{
								cart_name_lookhouse:Vue.keyword,
								cart_depository_lookhouse:Vue.kuSelectType_value,
								cart_type_lookhouse:Vue.selectCartType_value,
								num:Vue.limit,
								isall:Vue.isall
							}
						}
					}).then(({result}) => {
						if(result.code){
							this.$refs.uToast.show({
								title: '出错了！请重新登录。',
								type: 'error',
								position:"top"
							})
							uni.reLaunch({
								url:'../login/login'
							})
							return;
						}
						if(result.code){
							this.$refs.uToast.show({
								title: '出错了！请重新登录。',
								type: 'error',
								position:"top"
							})
							uni.reLaunch({
								url:'../login/login'
							})
							return;
						}
						let { data } = result.data
						data.map((item)=>{
							if(item.cook_utensils_jf == ""){
								item.cook_utensils_jf = "无"
							}
							if(item.cook_utensils_qtype == ""){
								item.cook_utensils_qtype = "无"
							}
							if(item.cook_utensils_cf == ""){
								item.cook_utensils_cf = "无"
							}
							if(item.cook_utensils_eyes == ""){
								item.cook_utensils_eyes = "无"
							}
						})
						Vue.cartList = data
						if(result.Olength < 7){
							this.status = 'nomore';
							this.isLoader = true
						}else{
							if(Vue.limit > result.Olength){
								this.status = 'nomore';
								this.isLoader = true
								for(var i = 0;i < 3;i++){
									this.selectCarts.push("")
									this.selectIcon.push("待添加")
									this.isSelected.push(false)
								}
								for(var i = 0;i < Vue.limit-result.Olength;i++){
									this.selectCarts.splice(-1,1)
									this.selectIcon.splice(-1,1)
									this.isSelected.splice(-1,1)
									console.log(i)
								}	
								Vue.limit = result.Olength
							}else{
								this.status = 'loading';
								this.isLoader = false
								for(var i = 0;i < 3;i++){
									this.selectCarts.push("")
									this.selectIcon.push("待添加")
									this.isSelected.push(false)
								}
							}
						}
						if(result.Olength == 0){
							this.isempty = true
						}else{
							this.isempty = false
						}
						this.isLoading = false
						console.log(result)
					}).catch(err => {
						this.status = 'loading';
						this.isLoader = false
						this.isLoading = false
						console.log(err)
					})
				}
			},
			search_cart(){
				var Vue = this;
				this.limit = 6
				this.isall = false
				uni.showLoading({
					title:"加载中。。。"
				})
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"lookhouse",
						params:{
							cart_name_lookhouse:Vue.keyword,
							cart_depository_lookhouse:Vue.kuSelectType_value,
							cart_type_lookhouse:Vue.selectCartType_value,
							num:Vue.limit,
							isall:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code){
						this.$refs.uToast.show({
							title: '出错了！请重新登录。',
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}
					let { data } = result.data
					data.map((item)=>{
						if(item.cook_utensils_jf == ""){
							item.cook_utensils_jf = "无"
						}
						if(item.cook_utensils_qtype == ""){
							item.cook_utensils_qtype = "无"
						}
						if(item.cook_utensils_cf == ""){
							item.cook_utensils_cf = "无"
						}
						if(item.cook_utensils_eyes == ""){
							item.cook_utensils_eyes = "无"
						}
					})
					Vue.selectCarts.splice(0,Vue.selectCarts.length)
					Vue.selectIcon.splice(0,Vue.selectIcon.length)
					Vue.selectNumber = 0
					Vue.isSelected.splice(0,Vue.isSelected.length)
					Vue.cartList = data
					if(result.Olength == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					if(result.Olength > Vue.limit){
						for(var i = 0;i < Vue.limit;i++){
							Vue.selectCarts.push("")
							Vue.selectIcon.push("待添加")
							Vue.isSelected.push(false)
						}
					}else{
						for(var i = 0;i < result.Olength;i++){
							Vue.selectCarts.push("")
							Vue.selectIcon.push("待添加")
							Vue.isSelected.push(false)
						}
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			selectCartType(e){
				this.selectCartValue_default = e[0].value - 1
				this.selectCartType_value = e[0].label
				this.isall = false
				this.limit = 6
				uni.showLoading({
					title:"加载中。。。"
				})
				var Vue = this;
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"lookhouse",
						params:{
							cart_name_lookhouse:Vue.keyword,
							cart_depository_lookhouse:Vue.kuSelectType_value,
							cart_type_lookhouse:Vue.selectCartType_value,
							num:Vue.limit,
							isall:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code){
						this.$refs.uToast.show({
							title: '出错了！请重新登录。',
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}
					let { data } = result.data
					data.map((item)=>{
						if(item.cook_utensils_jf == ""){
							item.cook_utensils_jf = "无"
						}
						if(item.cook_utensils_qtype == ""){
							item.cook_utensils_qtype = "无"
						}
						if(item.cook_utensils_cf == ""){
							item.cook_utensils_cf = "无"
						}
						if(item.cook_utensils_eyes == ""){
							item.cook_utensils_eyes = "无"
						}
					})
					Vue.selectCarts.splice(0,Vue.selectCarts.length)
					Vue.selectIcon.splice(0,Vue.selectIcon.length)
					Vue.selectNumber = 0
					Vue.isSelected.splice(0,Vue.isSelected.length)
					Vue.cartList = data
					if(result.Olength == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					if(result.Olength > Vue.limit){
						for(var i = 0;i < Vue.limit;i++){
							Vue.selectCarts.push("")
							Vue.selectIcon.push("待添加")
							Vue.isSelected.push(false)
						}
					}else{
						for(var i = 0;i < result.Olength;i++){
							Vue.selectCarts.push("")
							Vue.selectIcon.push("待添加")
							Vue.isSelected.push(false)
						}
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			selectKuType(e){
				this.kuSelectValue_default = e[0].value - 1
				this.kuSelectType_value = e[0].label
				this.isall = false
				this.limit = 6
				uni.showLoading({
					title:"加载中。。。"
				})
				var Vue = this;
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"lookhouse",
						params:{
							cart_name_lookhouse:Vue.keyword,
							cart_depository_lookhouse:Vue.kuSelectType_value,
							cart_type_lookhouse:Vue.selectCartType_value,
							num:Vue.limit,
							isall:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code){
						this.$refs.uToast.show({
							title: '出错了！请重新登录。',
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}
					let { data } = result.data
					data.map((item)=>{
						if(item.cook_utensils_jf == ""){
							item.cook_utensils_jf = "无"
						}
						if(item.cook_utensils_qtype == ""){
							item.cook_utensils_qtype = "无"
						}
						if(item.cook_utensils_cf == ""){
							item.cook_utensils_cf = "无"
						}
						if(item.cook_utensils_eyes == ""){
							item.cook_utensils_eyes = "无"
						}
					})
					Vue.selectCarts.splice(0,Vue.selectCarts.length)
					Vue.selectIcon.splice(0,Vue.selectIcon.length)
					Vue.selectNumber = 0
					Vue.isSelected.splice(0,Vue.isSelected.length)
					Vue.cartList = data
					if(result.Olength == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					if(result.Olength > Vue.limit){
						for(var i = 0;i < Vue.limit;i++){
							Vue.selectCarts.push("")
							Vue.selectIcon.push("待添加")
							Vue.isSelected.push(false)
						}
					}else{
						for(var i = 0;i < result.Olength;i++){
							Vue.selectCarts.push("")
							Vue.selectIcon.push("待添加")
							Vue.isSelected.push(false)
						}
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			selecting(item,i){
				this.isSelected[i] = !this.isSelected[i]
				if(this.isSelected[i] == true){
					this.selectIcon.splice(i,1,"移除")
					this.selectNumber += 1
					this.selectCarts.splice(i,1,{cart_id:item._id,cartName:item.cart_name,jf:item.cook_utensils_jf,lb:item.cook_utensils_qtype,cf:item.cook_utensils_cf,zysl:item.cook_utensils_eyes})
				}else{
					this.selectIcon.splice(i,1,"待添加")
					this.selectNumber -= 1
					this.selectCarts.splice(i,1,"")
				}
				console.log(this.selectCarts)
			}
		},
		components:{
			ytCard
		}
	}
</script>

<style lang="scss">
.spOuterhouse{
	position: absolute;
	width: 100%;
	min-height: 1480rpx;
	background-color: #EEEEEEFF;
	.selected{
		width: 80%;
		background-color: #fff;
		margin: 0rpx auto;
		margin-top: 64vh;
		border-radius: 80rpx;
		position: relative;
		font-size: 26.7rpx;
		border: 2.67rpx solid #7070703D;
		z-index: 9;
		.selected_title{
			display: inline-block;
			padding: 23.9rpx 0 23.9rpx 50.73rpx;
		}
		.selected_button{
			display: inline-block;
			float: right;
			padding: 23.9rpx 50.73rpx 23.9rpx 50.73rpx;
			background-color: #2AA20DFF;
			border-radius: 0 40rpx 40rpx 0;
			color: #fff;
		}
	}
	.content_scroll{
		position: absolute;
		display: block;
		height: 79vh;
		.gap_phone{
			height: 300rpx;
			width: 100%;
		}
	}
	.spOuterhouse_title{
		padding: 32.04rpx;
		background-color: #fff;
		width: 100%;
		border-bottom: 2.67rpx solid #7070703D;
		.title_search{
			padding: 0 0 26.7rpx 0;
		}
		.select_ku{
			padding: 26.7rpx 0;
			font-size: 30rpx;
		}
		.type_cart{
			padding: 26.7rpx 0 0 0;
			font-size: 30rpx;
		}
	}
	.content{
		display: inline-flex;
		.content_img_box{
			.content_img{
				border: 2.67rpx solid #7070703D;
				border-radius: 40.05rpx;
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}
		}
		.content_text{
			font-size: 20rpx;
			.content_text_cartName{
				margin-bottom: 25rpx;
			}
			.content_text_type{
				
				.type_1{
					margin-bottom: 25rpx;
				}
				.type_2{
					margin-bottom: 25rpx;
				}
			}
		}
		.content_add_button{
			text-align: center;
			position: absolute;
			right: 50rpx;
			.content_add_button_title{
				width: 70rpx;
				line-height: 45rpx ;
				border-radius: 40.05rpx;
				font-size:22rpx;
				display:inline-block;
				margin-top: 100rpx;
				padding: 5rpx 30rpx;
				background-color:#2AA20DFF;
				color: #fff;
			}
		}
	}
}

</style>
